<template>
  <el-form ref="formRef" :rules="rules" :model="form">
    <el-row>
      <el-col :span="12">
        <el-form-item label="服务渠道" prop="serviceChannelId" :label-position="labelPosition">
          <el-select
            v-model="form.serviceChannelId"
            filterable
            clearable
          >
            <el-option
              v-for="dict in dicts[DictDirection.服务渠道]"
              :key="dict.id"
              :label="dict.channelChName"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="成本价名称" prop="costPriceName" :label-position="labelPosition">
          <el-input v-model="form.costPriceName" clearable></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="货物类型" prop="goodsType" :label-position="labelPosition">
          <el-select
            v-model="form.goodsType"
            filterable
            clearable
          >
            <el-option
              v-for="dict in dicts[DictDirection.包裹类型]"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="付款方式" prop="paymentMethod" :label-position="labelPosition">
          <el-select
            v-model="form.paymentMethod"
            filterable
            clearable
          >
            <el-option
              v-for="dict in dicts[DictDirection.付款方式]"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script lang="ts" setup>
import { ref, watchEffect, defineProps, defineExpose } from 'vue'
import { ElMessage } from 'element-plus'
import useDicts, { DictDirection } from '@/store/modules/dicts'
import {
  addcostPrice,
  updatecostPrice,
} from '@/api/BusinessConfig/costPriceManagement'
import { validateForm } from '@/utils'

const labelPosition = ref('right')
const dicts = useDicts()
dicts.setDicts(DictDirection.计重规则)
dicts.setDicts(DictDirection.产品类别)
dicts.setDicts(DictDirection.通用状态)
dicts.setDicts(DictDirection.产品状态)
dicts.setDicts(DictDirection.产品组)
dicts.setDicts(DictDirection.服务商)
dicts.setDicts(DictDirection.燃油种类)
dicts.setDicts(DictDirection.打印服务)
dicts.setDicts(DictDirection.收款币种)
const props = defineProps({
  basicInfo: {
    type: Object,
    default: () => ({}),
  },
})
const form = ref({
  id: '',
  serviceChannelId: '',
  costPriceName: '',
  goodsType: '',
  paymentMethod: '',
})
watchEffect(() => {
  const {
    id,
    serviceChannelId,
    costPriceName,
    goodsType,
    paymentMethod,
  } = props.basicInfo
  Object.assign(form.value, {
    id,
    serviceChannelId,
    costPriceName,
    goodsType,
    paymentMethod,
  })
})
const formRef = ref()
const rules = {
  serviceChannelId: [{ required: true, message: '请选择服务渠道', trigger: ['change', 'blur'] }],
  costPriceName: [{ required: true, message: '请选择成本价名称', trigger: ['change', 'blur'] }],
  goodsType: [{ required: true, message: '请选择货物类型', trigger: ['change', 'blur'] }],
  paymentMethod: [{ required: true, message: '请选择付款方式', trigger: ['change', 'blur'] }],
}
const save = (type) => new Promise((resolve, reject) => {
  validateForm(formRef.value, () => {
    const fn = type === '修改' ? updatecostPrice : addcostPrice
    fn(form.value).then(res => {
      if (res.code === 200) {
        ElMessage.success(`${ type }成功！`)
        resolve(true)
      } else {
        reject()
      }
    })
  })
})
defineExpose({
  save,
})
</script>